<template>
  <div id="paymentSuccess">
    <header div class="head">        
        <!--<div class="back" @click="$router.go(-1)">            
        <mu-icon value="chevron_left"  />
        </div>-->
        <div class="flex1"></div>
        <div class="head_text" @click="">
            支付成功           
        </div>
        <div class="flex1"></div>
    </header>
    <section class="pay-suc-section">
        <header class="pay-suc-title"><i class="material-icons">check_circle</i>
            支付成功
        </header>
        <section class="suc-sec-cont">
            <ul>
                <li class="suc-con-list">
                    <div class="list-left">订单号:</div>
                    <div class="list-right">{{orderD.orderId}}</div>
                </li>
                <li class="suc-con-list">
                    <div class="list-left">名称:</div>
                    <div class="list-right">
                        <p class="right-top name-CN">{{orderD.roomTitle}}</p>
                        <p class="right-bottom name-EN">{{orderD.roomTitleEn}}</p>
                    </div>
                </li>
                <li class="suc-con-list">
                    <div class="list-left">入住时间:</div>
                    <div class="list-right">
                        <p class="right-top">{{orderD.checkinTime}} (入住)</p>
                        <p class="right-bottom">{{orderD.checkoutTime}} (离开)</p>
                    </div>
                </li>
                <li class="suc-con-list">
                    <div class="list-left">入住人:</div>
                    <div class="list-right">{{orderD.tenants[0].name}}</div>
                </li>
                <li class="suc-con-list">
                    <div class="list-left">手机号:</div>
                    <div class="list-right">{{orderD.tenants[0].mobileNo}}</div>
                </li>
                <li class="suc-con-list">
                    <div class="list-left">证件号:</div>
                    <div class="list-right">{{orderD.tenants[0].idNo}}</div>
                </li>
                <li class="suc-con-list">
                    <div class="list-left">发票抬头:</div>
                    <div class="list-right">{{orderD.invoiceContent}}</div>
                </li>
                <li class="suc-con-list">
                    <div class="list-left">可选服务:</div>
                    <div class="list-option-name">餐费</div>
                    <div class="list-option-price">{{orderD.orderAmounts[2].amount}} 元</div>
                </li>
                <li class="suc-con-list list-none-bottom">
                    <div class="list-left">总计:</div>
                    <div class="list-right">{{orderD.orderAmount}} 元</div>
                </li>
            </ul>
        </section>
        <footer class="suc-sec-footer">
            <span @click="checkOrder">查询订单</span>
        </footer>
    </section>
  </div>
</template>

<script>
    //require('../../assets/css/personalcenter.scss'); //引入的scss
    import {
        mapState,
        mapGetters,
        mapMutations,
        mapActions
    } from 'vuex'
    export default {
        name: 'paymentSuccess', //组件的名字
        data() {
            return { //数据
                msg: 'paymentSuccess'
            }
        },
        methods: { //方法
            ...mapActions(['getorderInfos']),
            checkOrder() {
                this.$router.push({
                    path: '/myOrder'
                })
            }
        },
        computed: { //计算 用来引入vuex里面state
            ...mapState(['orderD'])
        },
        mounted: function() { //组件加载完成
            let orderId = this.$route.query.orderId
            this.getorderInfos(orderId)
        },
        watch: { //健康某个数据变化后触发某个事件

        },
        destroyed: function() { //离开这个组件
        },
        components: {

        }

    }
</script>
<style scoped lang="scss">
    .head {
        display: flex;
        height: 48px;
        line-height: 48px;
        background: #333;
        .back {
            flex: 1;
            text-align: center;
            color: #fff;
            line-height: 64px;
        }
        .pay_text {
            flex: 7;
            position: relative;
            text-align: center;
            color: #fff;
            font-size: 18px;
        }
    }
    
    .pay-suc-section {
        margin: 0 15px;
        .pay-suc-title {
            font-size: 16px;
            font-family: "微软雅黑";
            line-height: 80px;
            height: 80px;
            color: #333;
            border-bottom: 1px solid #eee;
            i {
                vertical-align: -7px;
                color: #4faf50;
            }
        }
        .suc-sec-cont {
            .suc-con-list {
                display: flex;
                justify-content: center;
                /*定义项目在主轴的对齐方向*/
                align-items: center;
                /*定义项目在交叉轴的对齐方向*/
                padding: 12px 0;
                border-bottom: 1px solid #eee;
                .list-left {
                    flex: 2;
                    position: relative;
                    text-align: left;
                    font-size: 14px;
                    font-family: "微软雅黑";
                    color: #666;
                }
                .list-right {
                    flex: 6;
                    position: relative;
                    text-align: right;
                    color: #333;
                }
                .list-option-name {
                    flex: 4;
                    position: relative;
                    text-align: right;
                    color: #333;
                }
                .list-option-price {
                    flex: 2;
                    position: relative;
                    text-align: right;
                    color: #333;
                }
            }
            .list-none-bottom {
                border: none;
            }
        }
        .suc-sec-footer {
            margin: 20px auto;
            text-align: center;
            span {
                background: #ff6c00;
                padding: 5px 20px;
                color: #fff;
                font-size: 16px;
                text-align: center;
                cursor: pointer;
            }
        }
    }
</style>
<!-- Add "scoped" attribute to limit CSS to this component only -->